﻿<!DOCTYPE html>
<html>
<head>
	<title>热点编辑器</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	<link rel="stylesheet" type="text/css" href="css/editor.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<style>
		@-ms-viewport { width:device-width; }
		@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
		html { height:100%; }
		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
	</style>
</head>
<body>

<script src="tour.js"></script>
<!--热点样式弹窗-->
<div id="spotstyle_window">
	<div class="textbar">
		<span class="system_spot">系统样式</span>
		<span class="custom_spot">自定义样式</span>
	</div>
	<div class="style_container">
		<ul>
			<li class="hotspot_img"><img class="hotspot01_style" src="hs_img/skin_hotspot_01.png"></li>
			<li class="hotspot_img"><img class="hotspot02_style" src="hs_img/skin_hotspot_02.png"></li>
			<li class="hotspot_img"><img class="hotspot03_style" src="hs_img/skin_hotspot_03.png"></li>
			<li class="hotspot_img"><img class="hotspot04_style" src="hs_img/skin_hotspot_04.png"></li>
			<li class="hotspot_img"><img class="hotspot05_style" src="hs_img/skin_hotspot_05.png"></li>
		</ul>
	</div>
	<div class="custom_style">
		<span>请在下方输入您自定义的样式名称</span>
		<input type="text" name="input_style" id="custom_style" value="" >
	</div>
	<div class="stylebtn_container">
		<button id="style_sure">确定</button>
		<button id="style_quit">取消</button>
	</div>
</div>
<!--结果弹窗-->
<div id="result_window">
	<p>热点修改代码</p>
	<img id="window_close" src="icons/close.png"></img>
	<span class="text">请复制下方代码到您的项目中</span>
	<div id="result" class="result" contenteditable="true"></div>
	<button class="copy" data-clipboard-target="#result">复制</button>
</div>
<div id="text_window">
	<span class="text">请输入文字：</span>
	<input type="text" class="texts text_input"></input>
	<span id="text_sure" class="text_button">确定</span>
	<span id="text_quit" class="text_button" style="background: #566F69">取消</span>
</div>
<!--功能条-->
<div id="toolbar">
	<span class="scene_hotspot func_box">场景热点</span>
	<span class="add_text func_box">热点文字</span>
</div>
<!--场景选择列表-->
<div id="listofscene">
	<div class="list_contents">
		<ul id="scene"></ul>
	</div>
	<button id="scene_sure">确定</button>
	<button id="scene_quit">取消</button>
</div>
<!--编辑器开关-->
<div id="editor_switch">
	<span class="toggle"></span>
</div>
<!--编辑器-->
<div id="editor_container">
	<div class="spot_name">
			<span>热点名称</span>
			<input type="text" name="spot_name" value="">
			<input type="checkbox" name="w_h_value" >
			<span>宽高值</span>
			<img src="icons/gear.png">
	</div>
	<!--基础属性-->
	<div class="basic_attributes">
		<span>基础属性</span>
		<ul>
			<li class="range" id="scale">
				<p>大小</p>
				<input type="range" name="scale" class="scale" min="0" max="2" step="0.01">
				<input type="text" class="value" name="scale" value="">
			</li>
			<li  id="w_h" class="range">
				<p>宽度</p>
				<input type="range" name="width" class="value" min="0" max="1000" step="1">
				<p>高度</p>
				<input type="range" class="value" name="height" min="0" max="1000" step="1">
			</li>
			<li class="range">
				<p>透明度</p>
				<input type="range" name="alpha" class="alpha" min="0" max="1" step="0.01">
				<input type="text" class="value" name="alpha" value="">
			</li>			
		</ul>
	</div>
	<!--高级属性-->
	<div class="advanced_attributes">
		<span>高级属性</span>
		<ul>
			<li class="range">
				<p>旋转</p>
				<input type="range" name="rotate" class="rotate" min="-360" max="360" step="0,1">
				<input type="text" class="value" name="rotate" value="">
			</li>
			<li class="range">
				<p>3D翻转</p>
				<!--rx-->
				<input type="range" name="rx" class="rotate_x 3d" min="-360" max="360" step="0.1">
				<span class="attr_name">rx</span>
				<input type="text" class="value rotate_3d 3d" name="rx" value="">
				<!--ry-->
				<input type="range" name="ry" class="rotate_y 3d" min="-360" max="360" step="0.1">
				<span class="attr_name">ry</span>
				<input type="text" class="value rotate_3d 3d" name="ry" value="">
				<!--rz-->
				<input type="range" name="rz" class="rotate_z 3d" min="-360" max="360" step="0.1">
				<span class="attr_name">rz</span>
				<input type="text" class="value rotate_3d 3d" name="rz" value="">
			</li>
			<li class="range">
				<p>平移</p>
				<span class="translate">ox</span>
				<input type="text" name="ox" class="ox_value translate">
				<span class="translate">oy</span>
				<input type="text" name="oy" class="oy_value translate">
			</li>
		</ul>
		
	</div>
	<!--保存-->
	<button id="save_attributes">保存</button>
</div>

<div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
	<script>
		embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
	</script>
</div>

</body>
<script type="text/javascript" src="js/clipboard.min.js"></script>
<script type="text/javascript" src="js/editor.js"></script>
</html>
